@import "../../../styles/index.less";

.container {
  padding: 0 8px;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.container:global(.perf-mode) {
  height: 500px;
}

.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8px;

  h2 {
    margin-right: auto;
  }

  i {
    margin-left: 16px;
  }
}

.eventContainer {
  .radius();

  flex-grow: 1;
  height: 100px;
  position: relative;
  background: var(--section);
}

.eventContainer.overlay {
  height: 100%;
}

.cell {
  .radius();

  display: flex;
  align-items: center;
  padding: 8px 16px;
  flex-wrap: wrap;
  position: relative;

  span {
    margin-right: 8px;
    white-space: nowrap;
  }

  :global(.icon-repeat) {
    position: absolute;
    top: 10px;
    right: 16px;
  }

  :global(.fab) {
    opacity: 0.5;
  }
}

.cell:nth-child(even) {
  background: var(--background);
}

.cell-read {
  opacity: 0.6;
}

.donation {
  color: var(--teal);
}

.bits {
  color: var(--accent);
}

.sparks {
  color: var(--blue);
}

.embers {
  color: var(--warning);
}

.name {
  color: var(--title);
  font-weight: 500;
  margin-left: 8px;
}

.message {
  overflow: hidden;
  text-overflow: ellipsis;
}

.timestamp {
  opacity: 0.7;
}

.whisper {
  font-style: italic;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}

:global(.action-icon).red {
  color: var(--warning);

  &:hover {
    color: var(--warning);
  }
}

:global(.action-icon).teal {
  color: var(--icon-active);

  &:hover {
    color: var(--icon-active);
  }
}


.empty {
  .center();

  opacity: 0.5;
}
